<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
		
		<title>Daniel - EggHunt</title>
		<link rel="stylesheet" href="css/level.css" />
		<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
	
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
		<script type="text/javascript" src="js/Box2dWeb-2.1.a.3.min.js"></script>
		<script type="text/javascript" src ='js/theme4/game.js'></script>
		<script type="text/javascript" src ='js/theme4/level.js'></script>

	
	</head>
	<body>
	<div data-role="page" id="levelpage">

	  <div data-role="content">
	    <table>
			<tr>
				<td>
					<canvas id="canvas" width="800" height="450" style="background-color:#333333;" ></canvas>
				</td>
				<td>
					<img class="collectable1" src="img/bonbon_bw.png" height="50" /><br/>
					<img class="collectable2" src="img/lolly_bw.png" height="50" /><br/>
					<img class="collectable3" src="img/drop_bw.png" height="50" />
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<div class="txt" id="leveltxt">LEVEL 1</div>
					<div class="txt" id="leveldescription">
						<br>Objective: <br>
						You need to connect the electric source (red color) to the eggs (pink color) 
						by stacking blocks (green color) that scattered everywhere. blocks that have electric current
						(connected to the source) will be turned yellow. if you managed to connect the egg with electricity
						the egg will turn orange. you need to light up all the eggs before the time runs out
					</div>
					<input type="button" value="Reload Level" onclick="reloadPage();" />
					<input type="button" value="Menu" onclick="menu();" /> 				
				</td>
			</tr>
		</table>	
		
		<div data-role="popup" id="popup" data-transition="pop">
			<div data-role="header" role="banner" style="width:400px">
				<h1 class="ui-title" role="heading" aria-level="1">Congratulations!</h1>
			</div>
			<div data-role="content" role="main">
					<div style="text-align: center">
						<div>
							<img class="collectable1" src="img/bonbon_bw.png" height="50"/>
							<img class="collectable2" src="img/lolly_bw.png" height="50"/>
							<img class="collectable3" src="img/drop_bw.png" height="50"/>
						</div>
					</div>
					<input type="button" value="Next Level" data-theme="b" onclick="next();" />    
					<input type="button" value="Reload Level" onclick="reloadPage();" />
					<input type="button" value="Menu" onclick="menu();" />
				</div>
		</div>
		
		<div id="debug" style="font-size:20pt"></div>
		
		<script type="text/javascript" src="js/levelview.js"></script>
	</div>

	</div> 
	</body>
</html>
